<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo">
        <img src="~@/assets/logo.png" class="logo" alt="logo" />
        {{ title }}
      </div>
      <a-menu
        theme="dark"
        mode="horizontal"
        :selectedKeys="defaultSelect"
        :style="{ lineHeight: '64px' }"
        @click="handleMenuItem"
      >
        <a-menu-item v-for="(item, index) in menus" v-if="!item.hidden" :key="index">
          <a-icon v-if="typeof item.meta.icon === 'object'" :component="item.meta.icon" />
          <a-icon v-else :type="item.meta.icon" />
          {{ item.meta.title }}
        </a-menu-item>
      </a-menu>
      <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="padding-top: 20px">
        <a-menu
          theme="dark"
          mode="inline"
          :selectedKeys="selectedKeys"
          :openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
          @click="handleMenu"
          @openChange="openChange"
        >
          <template v-for="item in leftMenu">
            <a-menu-item v-if="!item.children && !item.hidden" :key="item.path">
              <a-icon v-if="typeof item.meta.icon === 'object'" :component="item.meta.icon" />
              <a-icon v-else :type="item.meta.icon" />
              {{ item.meta.title }}
            </a-menu-item>
            <a-sub-menu v-if="item.children && !item.hidden" :key="item.path">
              <span slot="title">
                <a-icon v-if="typeof item.meta.icon === 'object'" :component="item.meta.icon" />
                <a-icon v-else :type="item.meta.icon" />
                {{ item.meta.title }}</span>
              <a-menu-item :key="eItem.path" v-for="eItem in item.children" v-if="!eItem.hidden">
                <a-icon v-if="typeof eItem.meta.icon === 'object'" :component="item.meta.icon" />
                <a-icon v-else :type="eItem.meta.icon" />
                {{ eItem.meta.title }}
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout class="view-content-box">
        <router-view/>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import GlobalFooter from '@/components/GlobalFooter/index.vue'
import RightContent from '@/components/GlobalHeader/RightContent.vue'
import { mapState } from 'vuex'
import defaultSettings from '@/config/defaultSettings'

export default {
  components: { RightContent, GlobalFooter },
  data() {
    return {
      collapsed: false,
      menus: [],
      leftMenu: [],
      selectedKeys: [],
      openKeys: [],
      title: defaultSettings.title,
      settings: {
        // 布局类型
        layout: defaultSettings.layout, // 'sidemenu', 'topmenu' , `mixmenu`
        // CONTENT_WIDTH_TYPE
        contentWidth: defaultSettings.contentWidth,
        // 主题 'dark' | 'light'
        theme: defaultSettings.navTheme,
        // 主色调
        primaryColor: defaultSettings.primaryColor,
        fixedHeader: defaultSettings.fixedHeader,
        fixSiderbar: defaultSettings.fixSiderbar,
        multiTab: defaultSettings.multiTab,
        colorWeak: defaultSettings.colorWeak,

        hideHintAlert: true,
        hideCopyButton: false,
        tableSize: defaultSettings.tableSize,
        tableBordered: defaultSettings.tableBordered,
        hideFooter: defaultSettings.hideFooter,
      },
      defaultSelect: []
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: (state) => state.permission.menus,
      isMobile: state => state.app.isMobile,
    }),
  },
  created() {
    const routes = this.mainMenu.find((item) => item.path === '/')

    const menus = (routes && routes.children) || []
    if  (menus.filter(item => item.path === '/adminIndex').length < 1) {
      menus.splice(
        0,
        0,
        {
          path: '/adminIndex',
          meta: {
            target: '首页',
            hidden: false,
            title: '首页',
            icon: 'area-chart',
          },
          hidden: false,
          name: '首页',
        }
      )
    }
    // menus.splice(
    //   1,
    //   0,
    //   ...[
    //     {
    //       path: '/data-screen/operation-analysis',
    //       meta: {
    //         target: '潍城区中小企业运营分析',
    //         hidden: false,
    //         title: '潍城区中小企业运营分析',
    //         icon: 'area-chart',
    //       },
    //       hidden: false,
    //       name: '潍城区中小企业运营分析',
    //     },
    //     {
    //       path: '/data-screen/supervise',
    //       meta: {
    //         target: '工业园区产业大脑监管驾驶舱',
    //         hidden: false,
    //         title: '工业园区产业大脑监管驾驶舱',
    //         icon: 'area-chart',
    //       },
    //       hidden: false,
    //       name: '工业园区产业大脑监管驾驶舱',
    //     },
    //   ]
    // )

    this.menus = menus
    console.log(menus)
  },
  mounted() {
    const aaa = this.$router.currentRoute.path.split('/')
    this.defaultSelect = [this.menus.map(item => item.path).indexOf('/'+ aaa[1])]
    if (this.menus[this.defaultSelect[0]].children) {
      this.leftMenu = this.menus[this.defaultSelect[0]].children
    } else {
      this.leftMenu = [this.menus[this.defaultSelect[0]]]
    }
    this.selectedKeys = [this.$router.currentRoute.path]
  },
  methods: {
    handleMenuItem(e) {
      this.defaultSelect = [e.key]
      if(this.menus[e.key].children) {
        this.leftMenu = this.menus[e.key].children.filter(item => !item.hidden)
        if (this.leftMenu[0].children) {
            this.openKeys = [this.leftMenu[0].path]
            this.selectedKeys = [this.leftMenu[0].children.filter(item => !item.hidden)[0].path]
            this.$router.push({ path: this.leftMenu[0].children.filter(item => !item.hidden)[0].path })
        } else {
          this.selectedKeys = [this.leftMenu[0].path]
          this.$router.push({ path: this.leftMenu[0].path })
        }
      } else {
        this.$router.push({ path: this.menus[e.key].path })
        this.selectedKeys = [this.menus[e.key].path]
        this.leftMenu = [this.menus[e.key]]
      }
    },
    handleMenu(e) {
      this.$router.push({ path: e.key })
      this.selectedKeys = [e.key]
    },
    openChange(openKeys) {
      this.openKeys = openKeys
    }
  },
}
</script>

<style>
#components-layout-demo-top-side-2 .logo {
  width: 150px;
  color: #FFFFFF;
  font-size: 20px;
  font-family: Alibaba-PuHuiTi-B;
  z-index: 7;
  line-height: 1.5;
  text-align: center;
  transform: translate(-25px, 0);
  margin-top: 15px;
  img {
    height: 30px;
    width: 30px;
  }
}
#components-layout-demo-top-side-2 .header {
  display: flex;
}
.ant-space-item {
  color: #FFFFFFA6;
}
.ant-layout-sider-children {
  height: calc(100vh - 84px);
  overflow: auto;
}
.view-content-box {
  height: calc(100vh - 64px);
  overflow: auto;
}
.ant-pro-grid-content.wide {
  max-width: 100%;
}
</style>